<template>
  <div class="login-bg">
      <div class="x-bg"></div>    
      <div class="tg">
        <div class="logo-bg">
            <div class="logo"></div>
        </div>
        <div class="input-bg">
            <div class="input-wrapper">
                <div class="input-wrapper-s">
                    <div class="lo1"></div>
                    <input  class="phone" v-model='phone' type="text" placeholder="手机号" v-on:input ="inputFunc" value=""/>
                    <img @click="c1" src="../../assets/img/minXX.png">
                    <div class="send" @click="sendCode" :style="ccolor">{{this.codeContent}}</div>
                </div>
            </div>
            <div class="input-wrapper">
                <div class="input-wrapper-s">
                    <div class="lo2"></div>
                    <input  class="pCode" v-model='pCode' type="text" placeholder="验证码" v-on:input ="inputFunc" value=""/>
                    <img @click="c2" src="../../assets/img/minXX.png">
                </div>
            </div>
        </div>
      </div>
      <div class="bg">
        <div class="button" :style="lcolor" @click="login">登录</div>
      </div>
  </div>
</template>

<script>
import base from '../../constant/base'
import '../../assets/css/index.less'
import axios from 'axios'
import { addData, getData, getSessionData, addSessionData, removeSessionData } from '@/util/localData'

export default {
  name: 'login',
  data(){
    return{
        phone:'',
        pCode:'',
        codeIsOk:false,
        codeContent:"发送验证码",
        ss:60,
        timer:false,
        loginIsOk:false
    }
  },
  computed: {
    ccolor() {
        return { 
            color: this.codeIsOk? '#239aff' : '#909090',
            borderColor: this.codeIsOk? "#239aff" : "#909090"
        }
    },
    lcolor(){
        return{
            opacity: this.loginIsOk? 1:0.5
        }
    }
  },
  created() {
      let sendState = getSessionData("sendState")
      console.log(sendState)
      if(sendState){
          let s = JSON.parse(sendState)
          this.ss = s.ss
          this.timer = setInterval(()=>{
                this.ss--
                this.codeContent = "重新获取("+this.ss+"s)"
                addSessionData("sendState",{
                    codeIsOk:this.codeIsOk,
                    ss:this.ss
                })
                if(this.ss <= 0){
                    if(this.phone.length==11 && !isNaN(this.phone))this.codeIsOk = true
                    this.codeContent = "发送验证码"
                    this.ss = 60
                    clearInterval(this.timer)
                    removeSessionData("sendState")
                }
            },1000);
      }
  },
  methods:{
      c1:function(){
          this.phone = ''
          this.inputFunc()
      },
      c2:function(){
          this.pCode = ''
          this.inputFunc()
      },
      inputFunc:function(){
          if(this.phone.length==11 && !isNaN(this.phone)){
              if(this.ss == 0 || this.ss == 60)this.codeIsOk = true
          }else{
              this.codeIsOk = false
          }
          if(this.pCode.length==6 && this.phone.length==11 && !isNaN(this.phone)){
              this.loginIsOk = true
          }else{
              this.loginIsOk = false
          }
      },
      sendCode:function(){
        if(this.codeIsOk){
            console.log(this.phone)
            this.toSend() //发送验证码
            this.codeIsOk = false
            this.codeContent = "重新获取(60s)"
            this.timer = setInterval(()=>{
                this.ss--
                this.codeContent = "重新获取("+this.ss+"s)"
                addSessionData("sendState",{
                    codeIsOk:this.codeIsOk,
                    ss:this.ss
                })
                if(this.ss <= 0){
                    if(this.phone.length==11 && !isNaN(this.phone))this.codeIsOk = true
                    this.codeContent = "发送验证码"
                    this.ss = 60
                    clearInterval(this.timer)
                    removeSessionData("sendState")
                }
            },1000);
        }


      },
      login:function(){
        if(this.loginIsOk){
            let userInfo = getSessionData("zhili_userInfo")
            console.log("获取session中的用户信息")
            console.log(userInfo)
            if(userInfo){
                let user = JSON.parse(userInfo)
                axios.post(base.url+"wx/loginBind", {openId:user.openid,telNum:this.phone,captcha:this.pCode}).then((res)=>{
                    console.log(res)
                    if(res.data.state==0){
                        window.location.href = base.url+"wx/getCode"
                    }else{
                        alert(res.data.message)
                    }
                })
            }
        }
      },
      toSend:function(){
        console.log(this.phone)
        let userInfo = getSessionData("zhili_userInfo")
        console.log("获取session中的用户信息")
        console.log(userInfo)
        if(userInfo){
            let user = JSON.parse(userInfo)
            axios.post(base.url+"wx/sendCode", {openId:user.openid,telNum:this.phone}).then((res)=>{
                console.log(res)
            })
        }
      }
      
  }

}
</script>
